<template>
  <div class="hello">
	   <toubu></toubu>
	   
		<div class="banner_tou">
			<img src="../assets/img/banner1.jpg" />
		</div>
		<div class="shouye">
			<div class="shouye_tou">
				<div class="shouye_tou1">
					<span>达人榜</span>
				</div>
				<div class="shouye_tou2">
					<ul class="shouye_toutou">
						<li v-for="(item,index) in hangzai" @click="daohuo(index)" :key="index">
							<img :src="item.img" />
							<span>{{item.name}}</span>
						</li>
					</ul>
					<span class="tianjia"></span>
				</div>
				<div class="shouye_tou3">
					<span>更多</span>
				</div>
			</div>
			
			<daren></daren>
			
			
			<!--抖音直播达人榜单-->
			<div class="zhidaishang">
				<div class="zhidaishang1">
					<div class="zhidaishang1_1">
						<span>直播达人榜</span>
						<span>{{halazi}}</span>
					</div>
					<div class="zhidaishang1_2">
						<table cellpadding="0" cellspacing="0">
							<thead>
								<tr>
									<th></th>
									<th></th>
									<th>
										达人
									</th>
									<th>
										粉丝总数
									</th>
								</tr>
							</thead>
							<tbody>
								<tr @click="daxiang">
									<td>
										<img src="../assets/img/jinpai.png" />
									</td>
									<td>
										<img src="../assets/img/xiaoyang.png" />
									</td>
									<td>
										罗永浩
									</td>
									<td>
										{{shuzi | guolv}}
									</td>
								</tr>
								<tr @click="daxiang">
									<td>
										<img src="../assets/img/yinpai.png" />
									</td>
									<td>
										<img src="../assets/img/xiaoyang.png" />
									</td>
									<td>
										小菲特童装
									</td>
									<td>
										{{shuzi | guolv}}
									</td>
								</tr>
								<tr @click="daxiang">
									<td>
										<img src="../assets/img/tongpai.png" />
									</td>
									<td>
										<img src="../assets/img/xiaoyang.png" />
									</td>
									<td>
										蟹老板
									</td>
									<td>
										{{shuzi | guolv}}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="zhidaishang2">
					<div class="zhidaishang1_1">
						<span>带货视频榜</span>
						<span>{{halazi}}</span>
					</div>
					<div class="zhidaishang1_2">
						<table cellpadding="0" cellspacing="0">
							<thead>
								<tr>
									<th></th>
									<th></th>
									<th>
										视频
									</th>
									<th>
										点赞数
									</th>
								</tr>
							</thead>
							<tbody>
								<tr @click="daxiang">
									<td>
										<img src="../assets/img/jinpai.png" />
									</td>
									<td>
										<img src="../assets/img/laoluo.png" />
									</td>
									<td>
										罗永浩
									</td>
									<td>
										{{shuzi | guolv}}
									</td>
								</tr>
								<tr @click="daxiang">
									<td>
										<img src="../assets/img/yinpai.png" />
									</td>
									<td>
										<img src="../assets/img/laoluo.png" />
									</td>
									<td>
										小菲特童装
									</td>
									<td>
										{{shuzi | guolv}}
									</td>
								</tr>
								<tr @click="daxiang">
									<td>
										<img src="../assets/img/tongpai.png" />
									</td>
									<td>
										<img src="../assets/img/laoluo.png" />
									</td>
									<td>
										蟹老板
									</td>
									<td>
										{{shuzi | guolv}}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="zhidaishang3">
					<div class="zhidaishang1_1">
						<span>商品销量榜</span>
						<span>{{halazi}}</span>
					</div>
					<div class="zhidaishang1_2">
						<table cellpadding="0" cellspacing="0">
							<thead>
								<tr>
									<th></th>
									<th></th>
									<th>
										商品
									</th>
									<th>
										昨日日销
									</th>
								</tr>
							</thead>
							<tbody>
								<tr @click="daxiang">
									<td>
										<img src="../assets/img/jinpai.png" />
									</td>
									<td>
										<img src="../assets/img/datou.png" />
									</td>
									<td>
										罗永浩
									</td>
									<td>
										{{shuzi | guolv}}
									</td>
								</tr>
								<tr @click="daxiang">
									<td>
										<img src="../assets/img/yinpai.png" />
									</td>
									<td>
										<img src="../assets/img/datou.png" />
									</td>
									<td>
										小菲特童装
									</td>
									<td>
										{{shuzi | guolv}}
									</td>
								</tr>
								<tr @click="daxiang">
									<td>
										<img src="../assets/img/tongpai.png" />
									</td>
									<td>
										<img src="../assets/img/datou.png" />
									</td>
									<td>
										蟹老板
									</td>
									<td>
										{{shuzi | guolv}}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			
			<div class="tansuo">
				
				<!--一同探索卡思数据-->
				<div class="yitongtansuo">
					一同探索[深码数据]
				</div>
				
				<div class="tansuo_left">
					<h2>如果你是创作者或机构运营,你可以</h2>
					<ul>
						<li>
							<p>查找热门的视频、音乐及话题,追踪最新热点</p>
							<p>为你的创作提供更多灵感和素材,即使追踪热点,为打造爆款添砖加瓦</p>
						</li>
						<li>
							<p>多账号同时管理,自动检测视频及直播</p>
							<p>实时监测账号数据变化,适时调整账号内容运营策略</p>
						</li>
						<li>
							<p>查看各类下的达人、商品榜单</p>
							<p>了解自身账号位置、哪些达人近期或持续爆火,查找合适的带货商品,助力达人带货变现</p>
						</li>
					</ul>
					<div class="tansuo_anniu">
						立即试用 >>>
					</div>
				</div>
				<div class="tansuo_right">
				    <div class="zixielun">
						<div class="luntu">
							<ul class="luntu1">
								<li v-for="(item,index) in tu">
									<img :src="item.src" />
								</li>
							</ul>
						</div>
						<div class="zhishidian">
							<ul>
								<li v-for="(item,index) in 3"></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			
			<div class="tansuo1">
				<div class="tansuo_right1">
					<div class="zixielun1">
						<div class="luntu_1">
							<ul class="luntu1_1">
								<li v-for="(item,index) in tu">
									<img :src="item.src" />
								</li>
							</ul>
						</div>
						<div class="zhishidian1">
							<ul>
								<li v-for="(item,index) in 3"></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="tansuo_left1">
					<h2>如果你是创作者或机构运营,你可以</h2>
					<ul>
						<li>
							<p>查找热门的视频、音乐及话题,追踪最新热点</p>
							<p>为你的创作提供更多灵感和素材,即使追踪热点,为打造爆款添砖加瓦</p>
						</li>
						<li>
							<p>多账号同时管理,自动检测视频及直播</p>
							<p>实时监测账号数据变化,适时调整账号内容运营策略</p>
						</li>
						<li>
							<p>查看各类下的达人、商品榜单</p>
							<p>了解自身账号位置、哪些达人近期或持续爆火,查找合适的带货商品,助力达人带货变现</p>
						</li>
					</ul>
					<div class="tansuo_anniu">
						立即试用 >>>
					</div>
				</div>
			</div>
			
			<!--内容热门创作-->
			<div class="neiremen">
				<div class="neiremen1">
					<div class="zhidaishang1_1">
						<span>内容创作</span>
					</div>
					<div class="shouye_tou3">
						<span>更多</span>
					</div>
				</div>
				<div class="neiremen2">
					<div class="zhidaishang1_1">
						<span>热门资讯</span>
					</div>
					<div class="shouye_tou3">
						<span>更多</span>
					</div>
				</div>
			</div>
			
			<!--时间线-->
			<div class="shijianxian">
				<div class="shijianxian1">
					<div class="shijianxian1_1">
						<ul>
							<li>
								<span></span>
								<span>从“主播”辛有志到“企业家”辛有志</span>
								<span>2020-10-19</span>
							</li>
							<li>
								<span></span>
								<span>上线视频号2个月后,小红书上的创作者们斩获几何？</span>
								<span>2020-10-18</span>
							</li>
							<li>
								<span></span>
								<span>粉丝增速明显放缓,创作者如何打造自己的吸粉“利创作者如何打造自己的吸粉“利</span>
								<span>2020-10-17</span>
							</li>
						</ul>
						<div class="xianxian1"></div>
						<div class="xianxian2"></div>
						<div class="xianxian3"></div>
						
					</div>
					<div class="shijianxian1_2">
						<img src="../assets/img/guaiwu.png" />
					</div>
				</div>
				<div class="shijianxian2">
					<ul>
						<!-- <li>
							<span>百度App低调上线“购物”频道</span>
							<span>4天前</span>
						</li> -->
						<li v-for="(item,index) in 3" :key="index">
							<img v-if="huohua!=index" src="../assets/img/huo1.png" />
							<img v-else src="../assets/img/huo2.png" />
							<span>广电总局发布,《互联网互动视频数据格式规范》</span>
							<span>5天前</span>
						</li>
					</ul>
				</div>
			</div>
			
			<!--热门视频-->
			<div class="remenshipin">
				<div class="remenshipinzong">
					<div class="remenshipin1">
						<span>热门视频</span>
					</div>
					<div class="remenshipin2">
						<ul class="remenshipintou">
							<li v-for="(item,index) in hangzai" @click="daohuo1(index)" :key="index">
								<img :src="item.img" />
								<span>{{item.name}}</span>
							</li>
						</ul>
						<span class="tianjia"></span>
					</div>
				</div>
			</div>
			
			<remen class="shipin"></remen>
		</div>
		
		<!--底部-->
		<foot></foot>
		
  </div>
</template>

<script>
	//头部
	import toubu from "@/components/components/qianzou/header.vue"
	//达人榜单
	import daren from "@/components/components/qianzou/darenbang.vue"
	//热门视频
	import remen from "@/components/components/qianzou/remenshipin.vue"
	//底部
	import foot from "@/components/components/qianzou/foot.vue"
export default {
  name: 'index',
  components:{
	  toubu,
	  remen,
	  foot,
	  daren
  },
  data () {
    return {
      xiaoyangge:true,
	  shuzi:10122556,
	  flag:false,
	  hangzai:[
		  {img:require('../assets/img/douyin.png'),name:'抖音'},
		  {img:require('../assets/img/kuaishou.png'),name:'快手'},
		  {img:require('../assets/img/bibi.png'),name:'bibi'},
		  {img:require('../assets/img/weibo.png'),name:'新浪微博'},
		  {img:require("../assets/img/xiaohongshu.png"),name:'小红书'}
	  ],
	  halazi:'抖音',
	  huohua:0,//光电花火移上去变便便
	  tu:[
		  {
			  'src':require('../assets/img/diyi.png')
		  },
		  {
		  	'src':require('../assets/img/diyi.png')
		  },
		  {
		  	 'src':require('../assets/img/diyi.png')
		  }
	  ],
	  clientHeight:'',//屏幕可视区域高度
    }
  },
  //过滤器
  filters:{
	  guolv(shuzi){
		  if(shuzi>0){
		  	var wan=parseInt(shuzi).toString();
			var qumo=wan%10000;
		  	// console.log(wan%10000,"长度")
		  	//粉丝数改变
		  	if(wan.length<5){
		  		shuzi=wan;
		  	}else if(wan.length>4 && wan.length<=8){
		  		let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'万';
		  		shuzi=fen_si;
		  	}else if(wan.length>8){
		  		let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
		  		shuzi=fen_si;
		  	}
		  }
		  return shuzi
	  }
  },
  created(){
	  // console.log(this.$store.state.luyoushu,"刚进入")
	  //当第一次进来，vuex中的luyoushu为null或空就默认为0
	  if(this.$store.state.luyoushu==null || this.$store.state.luyoushu==''){
	  	this.$store.state.luyoushu=0;
		var gangjin=this.$store.state.luyoushu;
		this.halazi=this.hangzai[gangjin].name;
	  }
	  //当第一次进来，vuex中的luyoushu为不为null或空
	  if(this.$store.state.luyoushu!=null || this.$store.state.luyoushu!=''){
		  var gangjin=this.$store.state.luyoushu;
		  this.halazi=this.hangzai[gangjin].name;
	  }
	  
  },
  created() {
	
  },
  mounted:function(){
	  let _self=this;
	  $(".shijianxian2 ul li").hover(function(){
		  _self.huohua=$(this).index();
	  },function(){
		  
	  })
	  
	  //时间线
	  $('.shijianxian1_1 ul li').hover(function(){
		  $(this).children("span").css({"color":'#1890FF'})
		  // $(this).children("span:nth-of-type(1)").css({"background-color":"#1890FF"})
		  // $(this).siblings().children("span:nth-of-type(1)").css({"background-color":"#fff"})
		  $(this).siblings().children("span:nth-of-type(1)").css({"color":'#999'})
		  $(this).siblings().children("span:nth-of-type(3)").css({"color":'#999'})
		  $(this).siblings().children("span:nth-of-type(2)").css({"color":'#333'})
		  
		  //小圆圈移动
		  var shijianxian1=$(this).offset().top;
		  var shijianxian2=$(this).parents("ul").siblings(".xianxian3").offset().top-10;
		  var shijianxian3=$('.shijianxian1_1 ul li').eq(0).offset().top;
		  var shijinxianshu=$(this).index();
		  $(this).parents("ul").siblings(".xianxian3").css({"top":shijianxian1-shijianxian3+shijianxian1*0.0105+'px'})
	  })
	  
	  
	  //自己写轮播图
	  //定时器
	  var num=0;
	  var zong=_self.tu.length;
	  var dingshi = setInterval(function(){ 
		  if(num < zong-1){ 
			  num ++; 
		  }else{ 
			  num = 0;
		  }
		  //调用变换处理函数
		  $(".zhishidian ul li").eq(num).css({"width":'0.8rem',"border-radius":'0.5rem','background-color': '#0091ff'})
		  $(".zhishidian ul li").eq(num).siblings().css({"width":'0.3rem',"border-radius":'50%','background-color': '#fff'})
		  $(".zhishidian ul li").parents('.zhishidian').siblings('.luntu').children('.luntu1').animate({'left':'-'+num*20+'rem'})
	  },4000);
	  
	  //重定向计时器
	  function kaiding(){
		  dingshi = setInterval(function(){
			  if(num < zong-1){ 
				  num ++; 
			  }else{ 
				  num = 0;
			  }
			  //调用变换处理函数
			  $(".zhishidian ul li").eq(num).css({"width":'0.8rem',"border-radius":'0.5rem','background-color': '#0091ff'})
			  $(".zhishidian ul li").eq(num).siblings().css({"width":'0.3rem',"border-radius":'50%','background-color': '#fff'})
			  $(".zhishidian ul li").parents('.zhishidian').siblings('.luntu').children('.luntu1').animate({'left':'-'+num*20+'rem'})
		  },4000);
	  }
	  
	  $(".zhishidian ul li").eq(0).css({"width":'0.8rem',"border-radius":'0.5rem','background-color': '#0091ff'})
	  
	  $(".zhishidian ul li").hover(function(){
		  $(this).css({"width":'0.8rem',"border-radius":'0.5rem','background-color': '#0091ff'})
		  $(this).siblings().css({"width":'0.3rem',"border-radius":'50%','background-color': '#fff'})
		  
		  clearInterval(dingshi);//清楚定时器
		  
		  var zhi=$(this).index();
		  
		  for(let i in _self.tu){
			  if(i==zhi){
				  // console.log(i)
				  $(this).parents('.zhishidian').siblings('.luntu').children('.luntu1').animate({'left':'-'+i*20+'rem'})
			  }
		  }
	  },function(){
		  kaiding();
	  })
	  
	  // console.log(this.$store.state.luyoushu,'加载1')
	  
	  //自己写轮播图
	  //定时器
	  var num1=0;
	  var zong1=_self.tu.length;
	  var dingshi1 = setInterval(function(){ 
	  		  if(num1 < zong1-1){ 
	  			  num1 ++; 
	  		  }else{ 
	  			  num1 = 0;
	  		  }
	  		  //调用变换处理函数
	  		  $(".zhishidian1 ul li").eq(num1).css({"width":'0.8rem',"border-radius":'0.5rem','background-color': '#0091ff'})
	  		  $(".zhishidian1 ul li").eq(num1).siblings().css({"width":'0.3rem',"border-radius":'50%','background-color': '#fff'})
	  		  $(".zhishidian1 ul li").parents('.zhishidian1').siblings('.luntu_1').children('.luntu1_1').animate({'left':'-'+num*20+'rem'})
	  },4000);
	  
	  //重定向计时器
	  function kaiding1(){
	  		  dingshi1 = setInterval(function(){
	  			  if(num1 < zong1-1){ 
	  				  num1 ++; 
	  			  }else{ 
	  				  num1 = 0;
	  			  }
	  			  //调用变换处理函数
	  			  $(".zhishidian1 ul li").eq(num).css({"width":'0.8rem',"border-radius":'0.5rem','background-color': '#0091ff'})
	  			  $(".zhishidian1 ul li").eq(num).siblings().css({"width":'0.3rem',"border-radius":'50%','background-color': '#fff'})
	  			  $(".zhishidian1 ul li").parents('.zhishidian1').siblings('.luntu_1').children('.luntu1_1').animate({'left':'-'+num*20+'rem'})
	  		  },4000);
	  }
	  
	  $(".zhishidian1 ul li").eq(0).css({"width":'0.8rem',"border-radius":'0.5rem','background-color': '#0091ff'})
	  
	  $(".zhishidian1 ul li").hover(function(){
	  		  $(this).css({"width":'0.8rem',"border-radius":'0.5rem','background-color': '#0091ff'})
	  		  $(this).siblings().css({"width":'0.3rem',"border-radius":'50%','background-color': '#fff'})
	  		  
	  		  clearInterval(dingshi1);//清楚定时器
	  		  
	  		  var zhi1=$(this).index();
	  		  
	  		  for(let i in _self.tu){
	  			  if(i==zhi1){
	  				  // console.log(i)
	  				  $(this).parents('.zhishidian1').siblings('.luntu_1').children('.luntu1_1').animate({'left':'-'+i*20+'rem'})
	  			  }
	  		  }
	  },function(){
	  		  kaiding1();
	  })
	  
	if(this.$store.state.luyoushu!=null){
		var juzuo=$(".shouye_toutou li").eq(0).offset().left;
		var qiu=this.$store.state.luyoushu;
		var shu=parseInt($(".shouye_toutou li").eq(qiu).offset().left);
		$(".shouye_toutou li").parents("ul").siblings(".tianjia").css({"left":shu-juzuo+20+'px'})
		
		var juzuo1=$(".remenshipintou li").eq(0).offset().left;
		var shu1=parseInt($(".remenshipintou li").eq(qiu).offset().left);
		$(".remenshipintou li").parents("ul").siblings(".tianjia").css({"left":shu1-juzuo1+20+'px'})
	}
	  
	//达人榜滑动
  	$(".shouye_toutou li").click(function(){
		
		//第一个距离左边位置
		var juzuo=$(".shouye_toutou li").eq(0).offset().left;
		
		var shu=parseInt($(this).offset().left);
		$(this).parents("ul").siblings(".tianjia").css({"left":shu-juzuo+shu*0.05+'px'})
	})
	
	//热门视频滑动
	$(".remenshipintou li").click(function(){
		
		// console.log($(".remenshipintou li").eq(0).offset().left)
		//第一个距离左边位置
		var juzuo1=$(".remenshipintou li").eq(0).offset().left;
		
		var shu1=parseInt($(this).offset().left);
		$(this).parents("ul").siblings(".tianjia").css({"left":shu1-juzuo1+shu1*0.05+'px'})
	})
	
	//滑动页面出现动效
	window.addEventListener("scroll",this.handleScroll);
	
	//获取屏幕可视区域的高度
	this.clientHeight = document.documentElement.clientHeight;
	// console.log($(".shipin").offset().top/1.4,"快递师傅",$(".shipin").height())
	var ye=$(document).height()/this.clientHeight;
	// console.log(Math.ceil(ye))
  },
  destroyed() {
  	window.removeEventListener('scroll',this.handleScroll,false)
  },
  methods:{
	//实现当滚动到指定位置触发动画
	handleScroll(){
	  var scrollT=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	
	  // console.log(scrollT)
	  
	  //页面全体动画
	  //直播达人榜
	  if(scrollT<$(".zhidaishang1 .zhidaishang1_1").offset().top/6){
		  $(".zhidaishang1 .zhidaishang1_1").removeClass("animate__animated animate__fadeInLeft")
			
	  }
	  if(scrollT>=$(".zhidaishang1 .zhidaishang1_1").offset().top/6){
	    $(".zhidaishang1 .zhidaishang1_1").addClass("animate__animated animate__fadeInLeft")
	  }
	  if(scrollT>$(".zhidaishang1 .zhidaishang1_1").offset().top+$(".zhidaishang1 .zhidaishang1_1").height()*2){
		  $(".zhidaishang1 .zhidaishang1_1").removeClass("animate__animated animate__fadeInLeft")
	  }
	  //直播达人榜下面的表格
	  if(scrollT<$(".zhidaishang1_2").offset().top/4){
		  $(".zhidaishang1_2 table tr").removeClass("animate__animated animate__fadeInUp")
	  }
	  if(scrollT>=$(".zhidaishang1_2").offset().top/4){
		  $(".zhidaishang1_2 table tr").addClass("animate__animated animate__fadeInUp")
	  }
	  if(scrollT>$(".zhidaishang1_2").offset().top/2+$(".zhidaishang1_2").height()*3.5){
		  $(".zhidaishang1_2 table tr").removeClass("animate__animated animate__fadeInUp")
	  }
	  //一同探索
	  if(scrollT<$(".tansuo").offset().top/2.8){
	  	$(".yitongtansuo").removeClass("animate__animated animate__fadeInUp")
	  }
	  if(scrollT>=$(".tansuo").offset().top/2.8){
		  $(".yitongtansuo").addClass("animate__animated animate__fadeInUp")
	  }
	  if(scrollT>$(".tansuo").offset().top){
		  $(".yitongtansuo").removeClass("animate__animated animate__fadeInUp")
	  }
	  
	  //轮播左1
	  if(scrollT<$(".tansuo").offset().top/2){
	  		  $(".tansuo_left h2").removeClass("animate__animated animate__fadeInLeft")
	  		  $(".tansuo_left ul li").removeClass("animate__animated animate__fadeInLeft")
			  $(".tansuo_left .tansuo_anniu").removeClass("animate__animated animate__fadeInUp")
			  $(".tansuo_right").removeClass("animate__animated animate__fadeInRight")
	  }
	  if(scrollT>=$(".tansuo").offset().top/2){
		  $(".tansuo_left h2").addClass("animate__animated animate__fadeInLeft")
		  $(".tansuo_left ul li").addClass("animate__animated animate__fadeInLeft")
		  $(".tansuo_left .tansuo_anniu").addClass("animate__animated animate__fadeInUp")
		  $(".tansuo_right").addClass("animate__animated animate__fadeInRight")
	  }
	  if(scrollT>$(".tansuo").offset().top/2+$(".tansuo").height()*3.5){
		   $(".tansuo_left h2").removeClass("animate__animated animate__fadeInLeft")
		   $(".tansuo_left ul li").removeClass("animate__animated animate__fadeInLeft")
		  $(".tansuo_left .tansuo_anniu").removeClass("animate__animated animate__fadeInUp")
		  $(".tansuo_right").removeClass("animate__animated animate__fadeInRight")
	  }
	  
	  //轮播左2
	  if(scrollT<$(".tansuo1").offset().top/2){
	  		  $(".tansuo_left1 h2").removeClass("animate__animated animate__fadeInRight")
	  		  $(".tansuo_left1 ul li").removeClass("animate__animated animate__fadeInRight")
	  		 $(".tansuo_left1 .tansuo_anniu").removeClass("animate__animated animate__fadeInUp")
			 $(".tansuo_right1").removeClass("animate__animated animate__fadeInLeft")
	  }
	  if(scrollT>=$(".tansuo1").offset().top/2){
	  		  $(".tansuo_left1 h2").addClass("animate__animated animate__fadeInRight")
	  		  $(".tansuo_left1 ul li").addClass("animate__animated animate__fadeInRight")
	  		  $(".tansuo_left1 .tansuo_anniu").addClass("animate__animated animate__fadeInUp")
			  $(".tansuo_right1").addClass("animate__animated animate__fadeInLeft")
	  }
	  if(scrollT>$(".tansuo1").offset().top/2+$(".tansuo1").height()*3.5){
		   $(".tansuo_left1 h2").removeClass("animate__animated animate__fadeInRight")
		   $(".tansuo_left1 ul li").removeClass("animate__animated animate__fadeInRight")
		  $(".tansuo_left1 .tansuo_anniu").removeClass("animate__animated animate__fadeInUp")
		  $(".tansuo_right1").removeClass("animate__animated animate__fadeInLeft")
	  }
	  
	  //内容创作
	  if(scrollT<$(".neiremen").offset().top/1.5){
		$(".neiremen1 .zhidaishang1_1").removeClass("animate__animated animate__fadeInLeft");
		$(".neiremen1 .shouye_tou3").removeClass("animate__animated animate__fadeInLeft");
		
		$(".neiremen2 .zhidaishang1_1").removeClass("animate__animated animate__fadeInRight");
		$(".neiremen2 .shouye_tou3").removeClass("animate__animated animate__fadeInRight");
	  }
	  if(scrollT>=$(".neiremen").offset().top/1.5){
		$(".neiremen1 .zhidaishang1_1").addClass("animate__animated animate__fadeInLeft");
		$(".neiremen1 .shouye_tou3").addClass("animate__animated animate__fadeInLeft");
		
		$(".neiremen2 .zhidaishang1_1").addClass("animate__animated animate__fadeInRight");
		$(".neiremen2 .shouye_tou3").addClass("animate__animated animate__fadeInRight");
	  }
	  if(scrollT>$(".neiremen").offset().top+$(".neiremen").height()){
		  $(".neiremen1 .zhidaishang1_1").removeClass("animate__animated animate__fadeInLeft");
		  $(".neiremen1 .shouye_tou3").removeClass("animate__animated animate__fadeInLeft");
		  
		  $(".neiremen2 .zhidaishang1_1").removeClass("animate__animated animate__fadeInRight");
		  $(".neiremen2 .shouye_tou3").removeClass("animate__animated animate__fadeInRight");
	  }
	  
	  //内容创作内容和资讯内容
	  if(scrollT<$(".shijianxian").offset().top/1.5){
		  $(".shijianxian li").removeClass("animate__animated animate__fadeInUp")
		  $(".shijianxian .shijianxian1_2 img").removeClass("animate__animated animate__fadeInUp")
	  }
	  if(scrollT>=$(".shijianxian").offset().top/1.5){
		  $(".shijianxian li").addClass("animate__animated animate__fadeInUp")
		  $(".shijianxian .shijianxian1_2 img").addClass("animate__animated animate__fadeInUp")
	  }
	  if(scrollT>$(".shijianxian").offset().top+$(".shijianxian").height()){
		  $(".shijianxian li").removeClass("animate__animated animate__fadeInUp")
		  $(".shijianxian .shijianxian1_2 img").removeClass("animate__animated animate__fadeInUp")
	  }
	  
	  //热门视频的平台
	  if(scrollT<$(".remenshipin").offset().top/1.4){
		  $(".remenshipin li").removeClass("animate__animated animate__fadeInLeft");
		  $(".remenshipin .remenshipin1").removeClass("animate__animated animate__fadeInLeft");
	  }
	  if(scrollT>=$(".remenshipin").offset().top/1.4){
		  $(".remenshipin li").addClass("animate__animated animate__fadeInLeft");
		  $(".remenshipin .remenshipin1").addClass("animate__animated animate__fadeInLeft");
	  }
	  
	},
	  
	  
	//跳转达人详情页
	daxiang(){
		var gui=this.$store.state.luyoushu;
		this.$router.push('/home/'+gui+'/darenxiangqingye')
	},
	daohuo(index){
		this.halazi=this.hangzai[index].name;
		this.$store.state.luyoushu=index;
		
		window.localStorage.setItem("luyoushu",this.$store.state.luyoushu)
		
		if(this.$store.state.luyoushu!='null'){
			var juzuo=$(".shouye_toutou li").eq(0).offset().left;
			var qiu=this.$store.state.luyoushu;
			var shu=parseInt($(".shouye_toutou li").eq(qiu).offset().left);
			$(".shouye_toutou li").parents("ul").siblings(".tianjia").css({"left":shu-juzuo+shu*0.05+'px'})
			
			var juzuo1=$(".remenshipintou li").eq(0).offset().left;
			var shu1=parseInt($(".shouye_toutou li").eq(qiu).offset().left);
			$(".remenshipintou li").parents("ul").siblings(".tianjia").css({"left":shu1-juzuo1+shu1*0.08+'px'})
		}
	},
	daohuo1(index){
		this.halazi=this.hangzai[index].name;
		this.$store.state.luyoushu=index;
		
		window.localStorage.setItem("luyoushu",this.$store.state.luyoushu)
		
		if(this.$store.state.luyoushu!='null'){
			var juzuo=$(".shouye_toutou li").eq(0).offset().left;
			var qiu=this.$store.state.luyoushu;
			var shu=parseInt($(".shouye_toutou li").eq(qiu).offset().left);
			$(".shouye_toutou li").parents("ul").siblings(".tianjia").css({"left":shu-juzuo+shu*0.05+'px'})
			
			var juzuo1=$(".remenshipintou li").eq(0).offset().left;
			var shu1=parseInt($(".shouye_toutou li").eq(qiu).offset().left);
			$(".remenshipintou li").parents("ul").siblings(".tianjia").css({"left":shu1-juzuo1+shu1*0.08+'px'})
		}
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	/*左边换滑过来*/ 
	@keyframes slide-in-left {
	  0% {
	    -webkit-transform: translateX(-1000px);
	            transform: translateX(-1000px);
	    opacity: 0;
	  }
	  100% {
	    -webkit-transform: translateX(0);
	            transform: translateX(0);
	    opacity: 1;
	  }
	}
	/*右边换滑过来*/ 
	@keyframes slide-in-right {
	  0% {
	    transform: translateX(1000px);
	    opacity: 0;
	  }
	  100% {
	    transform: translateX(0);
	    opacity: 1;
	  }
	}
	//图片切入式
	@keyframes scale-in-hor-right {
	  0% {
	    transform: scaleX(0);
	    transform-origin: 100% 100%;
	    opacity: 1;
	  }
	  100% {
	    transform: scaleX(1);
	    transform-origin: 100% 100%;
	    opacity: 1;
	  }
	}

	.hello{
		.banner_tou{
			margin-bottom:1% ;
			
			img{
				// animation: scale-in-hor-right 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
				width: 46.7rem;
			}
		}
		
		.shouye{
			width: 37rem;
			margin: auto;
			
			.shouye_tou{
				height: 2.8rem;
				border-bottom:1px solid #E6E6E6;
				
				.shouye_tou1{
					height: 100%;
					box-sizing: border-box;
					float: left;
					position: relative;
					// animation: slide-in-left 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					
					span{
						font-weight: 600;
						font-size: 0.5rem;
						display: inline-block;
						margin-left:0.8rem ;
						margin-top:0.8rem ;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: 0.6rem;
						left: 0;
						width: 0.3rem;
						height: 1rem;
						background-color: #1890FF;
					}
				}
				.shouye_tou1::after{
					content: "";
					display: block;
					clear: both;
				}
				.shouye_tou2{
					float: left;
					margin-left:0.45rem ;
					position: relative;
					
					ul{
						list-style: none;
						
						li{
							float: left;
							font-size: 0.5rem;
							color: #000;
							font-weight: 500;
							padding: 0.8rem 0 1.6rem 0;
							margin: 0 0.9rem;
							cursor: pointer;
							
							img{
								vertical-align: middle;
								width: 0.8rem;
								height: 0.8rem;
							}
							
							span{
								display: inline-block;
								margin-left:0.2rem ;
							}
						}
						li:nth-of-type(1){
							animation: slide-in-left 0.35s cubic-bezier(.72,.27,.32,.72) both;
						}
						li:nth-of-type(2){
							animation: slide-in-left 0.45s cubic-bezier(.72,.27,.32,.72) both;
						}
						li:nth-of-type(3){
							animation: slide-in-left 0.55s cubic-bezier(.72,.27,.32,.72) both;
						}
						li:nth-of-type(4){
							animation: slide-in-left 0.65s cubic-bezier(.72,.27,.32,.72) both;
						}
						li:nth-of-type(5){
							animation: slide-in-left 0.75s cubic-bezier(.72,.27,.32,.72) both;
						}
						
					}
					.tianjia{
						position: absolute;
						display: block;
						height: 1px;
						width: 2.4rem;
						background-color:#1890FF ;
						bottom: 0.4rem;
						left: 4%;
						transition: all 0.6s ease;
					}
					.tianjia:before{
						position: absolute;
						left: 0.8rem;
						top: -0.3rem;
						content: "";
						display: block;
						width: 0;
						height: 0;
						border-left: 0.4rem solid transparent;
						border-right: 0.4rem solid transparent;
						border-bottom: 0.3rem solid #1890FF;
					}
				}
				.shouye_tou3{
					animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					float: right;
					height: 100%;
					box-sizing: border-box;
					width: 3rem;
					height: 2rem;
					position: relative;
					cursor: pointer;
					
					span{
						font-size: 0.5rem;
						color: #000;
						float: left;
						margin-left:1rem ;
						margin-top:0.8rem;
					}
					span::after{
						content: "";
						display: block;
						width: 0.3rem;
						height: 0.3rem;
						border-top:1px solid #000 ;
						border-right: 1px solid #000;
						transform: rotate(45deg);
						display: inline-block;
						position: absolute;
						top: 1rem;
						right: 0.2rem;
					}
				}
			}
			.zhidaishang{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:0.7rem ;
				
				.zhidaishang1{
					width: 30%;
					
					.zhidaishang1_1{
						animation-delay: 0.25s;
						box-sizing: border-box;
						position: relative;
						padding-bottom:1rem ;
						border-bottom:1px solid #E6E6E6 ;
						
						span:nth-of-type(1){
							font-weight: 600;
							font-size: 0.5rem;
							display: inline-block;
							margin-left:0.8rem ;
							letter-spacing: 2px;
						}
						
						span:nth-of-type(1)::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.35rem;
							left: 0;
							width: 0.3rem;
							height: 1rem;
							background-color: #1890FF;
						}
						span:nth-of-type(2){
							font-size: 0.35rem;
							display: inline;
							color: #666;
							border:1px solid #666666 ;
							padding: 0.05rem 0.15rem;
							border-radius:0.1rem ;
							opacity: 0.8;
						}
					}
					
					.zhidaishang1_2{
						color: #666666;
						font-size: 0.4rem;
						padding-bottom:0.5rem ;
						border-bottom:1px solid #E6E6E6 ;
						
						table{
							border: none;
							width: 100%;
							tr{
								cursor: pointer;
							}
							tr:hover td{
								color: #1890FF;
							}
							tr:nth-of-type(1){
								animation-delay: 0.5s;
							}
							tr:nth-of-type(2){
								animation-delay: 0.7s;
							}
							tr:nth-of-type(3){
								animation-delay: 0.9s;
							}
							th{
								// width: 25%;
								text-align: left;
								height: 1.5rem;
								font-weight: normal;
							}
							th:nth-of-type(1){
								width: 1.8rem;
							}
							th:nth-of-type(2){
								width: 2rem;
							}
							td{
								// width: 25%;
								text-align: left;
								height: 1.6rem;
								vertical-align: middle !important;
							}
							td:nth-of-type(1){
								img{
									width: 0.75rem;
								}
							}
							td:nth-of-type(2){
								img{
									width: 1rem;
								}
							}
						}
					}
				}
				
				.zhidaishang2{
					width: 30%;
					
					.zhidaishang1_1{
						animation-delay: 0.35s;
						box-sizing: border-box;
						position: relative;
						padding-bottom:1rem ;
						border-bottom:1px solid #E6E6E6 ;
						
						span:nth-of-type(1){
							font-weight: 600;
							font-size: 0.5rem;
							display: inline-block;
							margin-left:0.8rem ;
							letter-spacing: 2px;
						}
						
						span:nth-of-type(1)::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.35rem;
							left: 0;
							width: 0.3rem;
							height: 1rem;
							background-color: #1890FF;
						}
						span:nth-of-type(2){
							font-size: 0.35rem;
							display: inline;
							color: #666;
							border:1px solid #666666 ;
							padding: 0.05rem 0.15rem;
							border-radius:0.1rem ;
							opacity: 0.8;
						}
					}
					
					.zhidaishang1_2{
						color: #666666;
						font-size: 0.4rem;
						padding-bottom:0.5rem ;
						border-bottom:1px solid #E6E6E6 ;
						
						table{
							border: none;
							width: 100%;
							tr{
								cursor: pointer;
							}
							tr:hover td{
								color: #1890FF;
							}
							tr:nth-of-type(1){
								animation-delay: 0.5s;
							}
							tr:nth-of-type(2){
								animation-delay: 0.7s;
							}
							tr:nth-of-type(3){
								animation-delay: 0.9s;
							}
							th{
								// width: 25%;
								text-align: left;
								height: 1.5rem;
								font-weight: normal;
							}
							td{
								// width: 25%;
								text-align: left;
								height: 1.6rem;
								vertical-align: middle !important;
							}
							th:nth-of-type(1){
								width: 1.8rem;
							}
							th:nth-of-type(2){
								width: 2rem;
							}
							td:nth-of-type(1){
								img{
									width: 0.75rem;
								}
							}
							td:nth-of-type(2){
								img{
									width: 1rem;
								}
							}
						}
					}
				}
				
				.zhidaishang3{
					width: 30%;
					
					.zhidaishang1_1{
						animation-delay: 0.45s;
						box-sizing: border-box;
						position: relative;
						padding-bottom:1rem ;
						border-bottom:1px solid #E6E6E6 ;
						
						span:nth-of-type(1){
							font-weight: 600;
							font-size: 0.5rem;
							display: inline-block;
							margin-left:0.8rem ;
							letter-spacing: 2px;
						}
						
						span:nth-of-type(1)::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.35rem;
							left: 0;
							width: 0.3rem;
							height: 1rem;
							background-color: #1890FF;
						}
						span:nth-of-type(2){
							font-size: 0.35rem;
							display: inline;
							color: #666;
							border:1px solid #666666 ;
							padding: 0.05rem 0.15rem;
							border-radius:0.1rem ;
							opacity: 0.8;
						}
					}
					
					.zhidaishang1_2{
						color: #666666;
						font-size: 0.4rem;
						padding-bottom:0.5rem ;
						border-bottom:1px solid #E6E6E6 ;
						
						table{
							border: none;
							width: 100%;
							tr{
								cursor: pointer;
							}
							tr:hover td{
								color: #1890FF;
							}
							tr:nth-of-type(1){
								animation-delay: 0.5s;
							}
							tr:nth-of-type(2){
								animation-delay: 0.7s;
							}
							tr:nth-of-type(3){
								animation-delay: 0.9s;
							}
							th{
								// width: 25%;
								text-align: left;
								height: 1.5rem;
								font-weight: normal;
							}
							td{
								// width: 25%;
								text-align: left;
								height: 1.6rem;
								vertical-align: middle !important;
							}
							th:nth-of-type(1){
								width: 1.8rem;
							}
							th:nth-of-type(2){
								width: 2rem;
							}
							td:nth-of-type(1){
								img{
									width: 0.75rem;
								}
							}
							td:nth-of-type(2){
								img{
									width: 1rem;
								}
							}
						}
					}
				}
				
			}
			
			.tansuo{
				
				.yitongtansuo{
					text-align: center;
					color: #000000;
					font-size: 1rem;
					letter-spacing: 1px;
					margin: 2rem 0;
				}
				
				.tansuo_left{
					width: 45%;
					float: left;
					padding-right:0.5rem ;
					box-sizing: border-box;
					
					h2{
						color: #0091FF;
						font-size: 0.65rem;
						animation-delay: 0.5s;
					}
					ul{
						list-style: none;
						
						li{
							margin: 1rem 0;
							padding: 0.2rem;
							cursor: pointer;
							transition: all 0.3s ease;
							p:nth-of-type(1){
								color: #333333;
								font-size: 0.54rem;
								position: relative;
								margin-left:1rem ;
							}
							p:nth-of-type(1)::before{
								content: "√";
								display: block;
								position: absolute;
								top: 0.1rem;
								left: -1rem;
								background-color: #00A2FF;
								border-radius:50% ;
								text-align: center;
								font-size: 0.4rem;
								line-height: 0.5rem;
								width: 0.5rem;
								height: 0.5rem;
								color: #fff;
								padding: 0.05rem;
							}
							p:nth-of-type(2){
								margin-left:1rem ;
								color: #666666;
								font-size: 0.4rem;
								margin-top:0.4rem ;
								line-height: 0.7rem;
							}
						}
						li:nth-of-type(1){
							animation-delay: 0.7s;
						}
						li:nth-of-type(2){
							animation-delay: 0.9s;
						}
						li:nth-of-type(3){
							animation-delay: 1.1s;
						}
						li:hover{
							box-shadow: 0 0.03rem 0.1rem rgba(0,0,0,0.2);
							border-radius:0.1rem ;
						}
						li:hover p:nth-of-type(1){
							color:#0091FF ;
						}
					}
					.tansuo_anniu{
						animation-delay: 1.3s;
						margin: auto;
						width: 5.5rem;
						height: 1.5rem;
						line-height: 1.5rem;
						text-align: center;
						color: #fff;
						background-color: #0091FF;
						border-radius:0.2rem ;
						font-size: 0.6rem;
						margin-top:1.2rem ;
						cursor: pointer;
					}
				}
				.tansuo_right{
					background: url(../assets/img/you.png) no-repeat;
					background-size:100% 100% ;
					animation-delay: 0.8s;
					width: 54%;
					float: right;
					height: 15.5rem;
					
					.zixielun{
						border: 1px solid transparent;
						width: 93%;
						margin: auto;
						margin-top:0.9rem ;
						
						.luntu{
							position: relative;
							height: 10rem;
							// width: 18rem;
							margin-left:0rem ;
							overflow: hidden;
							margin-top:1rem ;
							.luntu1{
								position: relative;
								list-style: none;
								width: 60rem;
								height: 10rem;
								overflow: hidden;
								
								li{
									float: left;
									width: 20rem;
									height: 10rem;
									
									img{
										width: 100%;
									}
								}
							}
							.luntu1::after{
								content: "";
								display: block;
								clear: both;
							}
						}
						
						.zhishidian{
							margin-top:0.8rem ;
							ul{
								list-style: none;
								display: flex;
								justify-content: space-around;
								width: 4rem;
								margin-left:30% ;
								
								li{
									cursor: pointer;
									transition: all 0.5s ease;
									width: 0.3rem;
									height: 0.3rem;
									margin: 0.2rem;
									border-radius:50% ;
									background-color: #fff;
								}
							}
						}
					}
					
				}
			}
			.tansuo::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.tansuo1{
				margin-top:1.2rem ;
				
				.tansuo_left1{
					width: 45%;
					float: right;
					padding-right:0.5rem ;
					box-sizing: border-box;
					
					h2{
						color: #0091FF;
						font-size: 0.65rem;
						animation-delay: 0.5s;
					}
					ul{
						list-style: none;
						
						li{
							padding: 0.2rem;
							margin: 1rem 0;
							cursor: pointer;
							transition: all 0.3s ease;
							p:nth-of-type(1){
								color: #333333;
								font-size: 0.54rem;
								position: relative;
								margin-left:1rem ;
							}
							p:nth-of-type(1)::before{
								content: "√";
								display: block;
								position: absolute;
								top: 0.1rem;
								left: -1rem;
								background-color: #00A2FF;
								border-radius:50% ;
								text-align: center;
								font-size: 0.4rem;
								line-height: 0.5rem;
								width: 0.5rem;
								height: 0.5rem;
								color: #fff;
								padding: 0.05rem;
							}
							p:nth-of-type(2){
								margin-left:1rem ;
								color: #666666;
								font-size: 0.4rem;
								margin-top:0.4rem ;
								line-height: 0.7rem;
							}
						}
						li:nth-of-type(1){
							animation-delay: 0.7s;
						}
						li:nth-of-type(2){
							animation-delay: 0.9s;
						}
						li:nth-of-type(3){
							animation-delay: 1.1s;
						}
						li:hover{
							box-shadow: 0 0.03rem 0.1rem rgba(0,0,0,0.2);
							border-radius:0.1rem ;
						}
						li:hover p:nth-of-type(1){
							color:#0091FF ;
						}
					}
					.tansuo_anniu{
						animation-delay: 1.3s;
						margin: auto;
						width: 5.5rem;
						height: 1.5rem;
						line-height: 1.5rem;
						text-align: center;
						color: #fff;
						background-color: #0091FF;
						border-radius:0.2rem ;
						font-size: 0.6rem;
						margin-top:1.2rem ;
						cursor: pointer;
					}
				}
				.tansuo_right1{
					background: url(../assets/img/zuo.png) no-repeat;
					background-size:100% 100% ;
					animation-delay: 0.8s;
					width: 51.5%;
					float: left;
					height: 15.5rem;
					
					.zixielun1{
						border: 1px solid transparent;
						width: 93%;
						margin: auto;
						margin-top:1.2rem ;
						
						.luntu_1{
							position: relative;
							height: 10rem;
							// width: 18rem;
							margin-left:0rem ;
							overflow: hidden;
							margin-top:1rem ;
							.luntu1_1{
								position: relative;
								list-style: none;
								width: 60rem;
								height: 10rem;
								overflow: hidden;
								
								li{
									float: left;
									width: 20rem;
									height: 10rem;
									
									img{
										width: 100%;
									}
								}
							}
							.luntu1_1::after{
								content: "";
								display: block;
								clear: both;
							}
						}
						
						.zhishidian1{
							margin-top:0.8rem ;
							ul{
								list-style: none;
								display: flex;
								justify-content: space-around;
								width: 3.5rem;
								margin-left:52% ;
								
								li{
									cursor: pointer;
									transition: all 0.5s ease;
									width: 0.3rem;
									height: 0.3rem;
									margin: 0.2rem;
									border-radius:50% ;
									background-color: #fff;
								}
							}
						}
					}
					
				}
			}
			.tansuo1::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.neiremen{
				margin-top:3rem ;
				
				.neiremen1{
					width: 54%;
					float: left;
					border-bottom:1px solid #E6E6E6 ;
					
					.zhidaishang1_1{
						box-sizing: border-box;
						position: relative;
						padding-bottom:1rem ;
						float: left;
						
						span:nth-of-type(1){
							font-weight: 600;
							font-size: 0.5rem;
							display: inline-block;
							margin-left:0.8rem ;
							letter-spacing: 2px;
						}
						
						span:nth-of-type(1)::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.35rem;
							left: 0;
							width: 0.3rem;
							height: 1rem;
							background-color: #1890FF;
						}
					}
					.shouye_tou3{
						float: right;
						height: 100%;
						box-sizing: border-box;
						width: 3rem;
						height: 2rem;
						position: relative;
						cursor: pointer;
						
						span{
							font-size: 0.5rem;
							color: #000;
							float: left;
							margin-left:1rem ;
							margin-top:0.65rem;
						}
						span::after{
							content: "";
							display: block;
							width: 0.3rem;
							height: 0.3rem;
							border-top:1px solid #000 ;
							border-right: 1px solid #000;
							transform: rotate(45deg);
							display: inline-block;
							position: absolute;
							top: 0.85rem;
							right: 0.2rem;
						}
					}
					
				}
				.neiremen1::after{
					content: "";
					display: block;
					clear: both;
				}
				.neiremen2{
					width: 44%;
					float: right;
					border-bottom:1px solid #E6E6E6 ;
					
					.zhidaishang1_1{
						box-sizing: border-box;
						position: relative;
						padding-bottom:1rem ;
						float: left;
						
						span:nth-of-type(1){
							font-weight: 600;
							font-size: 0.5rem;
							display: inline-block;
							margin-left:0.8rem ;
							letter-spacing: 2px;
						}
						
						span:nth-of-type(1)::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.35rem;
							left: 0;
							width: 0.3rem;
							height: 1rem;
							background-color: #1890FF;
						}
					}
					.shouye_tou3{
						float: right;
						height: 100%;
						box-sizing: border-box;
						width: 3rem;
						height: 2rem;
						position: relative;
						cursor: pointer;
						
						span{
							font-size: 0.5rem;
							color: #000;
							float: left;
							margin-left:1rem ;
							margin-top:0.65rem;
						}
						span::after{
							content: "";
							display: block;
							width: 0.3rem;
							height: 0.3rem;
							border-top:1px solid #000 ;
							border-right: 1px solid #000;
							transform: rotate(45deg);
							display: inline-block;
							position: absolute;
							top: 0.85rem;
							right: 0.2rem;
						}
					}
					
				}
				.neiremen2::after{
					content: "";
					display: block;
					clear: both;
				}
			}
			.neiremen::after{
				content: "";
				display: block;
				clear: both;
			}
			.shijianxian{
				
				.shijianxian1{
					width: 54%;
					float: left;
					
					.shijianxian1_1{
						width: 70.5%;
						float: left;
						position: relative;
						
						ul{
							list-style: none;
							
							li{
								margin: 0.6rem 0;
								line-height: 0.8rem;
								cursor: pointer;
								position: relative;
								padding-left:0.8rem ;
								
								span:nth-of-type(1){
									width: 0.3rem;
									height: 0.3rem;
									border: 1px solid #C6C6C6;
									border-radius:50% ;
									position: absolute;
									top: 0.25rem;
									left: 0;
								}
								
								span:nth-of-type(2){
									color: #333333;
									font-size: 0.4rem;
									display: block;
									
									overflow: hidden;
									text-overflow:ellipsis;
									white-space: nowrap;
								}
								span:nth-of-type(3){
									color: #999999;
									font-size: 0.3rem;
									display: block;
								}
							}
							li:nth-of-type(1){
								animation-delay: 0.35s;
							}
							li:nth-of-type(2){
								animation-delay: 0.45s;
							}
							li:nth-of-type(3){
								animation-delay: 0.55s;
							}
						}
						.xianxian1{
							width: 0.01rem;
							height: 1.75rem;
							background-color:#C6C6C6 ;
							position: absolute;
							top: 1.25rem;
							left: 0.18rem;
						}
						.xianxian2{
							width: 0.01rem;
							height: 1.75rem;
							background-color:#C6C6C6 ;
							position: absolute;
							top: 3.43rem;
							left: 0.18rem;
						}
						.xianxian3{
							width: 0.3rem;
							height: 0.3rem;
							border: 1px solid #C6C6C6;
							border-radius:50% ;
							position: absolute;
							top: 0.85rem;
							left: 0;
							background-color: #1890FF;
							transition: all 0.5s ease;
						}
						
					}
					.shijianxian1_2{
						float: right;
						width: 5.5rem;
						margin-top:3.45rem ;
						img{
							width: 5.5rem;
							vertical-align: middle;
							animation-delay: 0.15s;
						}
					}
				}
				.shijianxian1::after{
					content: "";
					display: block;
					clear: both;
				}
				
				.shijianxian2{
					width: 44%;
					float: right;
					
					ul{
						list-style: none;
						
						li{
							margin: 0.6rem 0;
							line-height: 0.8rem;
							cursor: pointer;
							position: relative;
							padding-left:0.8rem ;
							
							img{
								width: 0.4rem;
								height: 0.5rem;
								border-radius:50% ;
								position: absolute;
								top: 0.25rem;
								left: 0;
							}
							
							span:nth-of-type(1){
								color: #333333;
								font-size: 0.4rem;
								display: block;
								
								overflow: hidden;
								text-overflow:ellipsis;
								white-space: nowrap;
							}
							span:nth-of-type(2){
								color: #999999;
								font-size: 0.3rem;
								display: block;
							}
						}
						li:nth-of-type(1){
							animation-delay: 0.35s;
						}
						li:nth-of-type(2){
							animation-delay: 0.45s;
						}
						li:nth-of-type(3){
							animation-delay: 0.55s;
						}
						
						li:hover span{
							color: #1890FF;
						}
					}
					
				}
			}
			.shijianxian::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.remenshipin{
				margin-top:1.5rem ;
				
				.remenshipinzong{
					height: 2.8rem;
					border-bottom:1px solid #E6E6E6;
					
					.remenshipin1{
						animation-delay: 0.35s;
						height: 100%;
						box-sizing: border-box;
						float: left;
						position: relative;
						
						span{
							font-weight: 600;
							font-size: 0.5rem;
							display: inline-block;
							margin-left:0.8rem ;
							margin-top:0.8rem ;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.6rem;
							left: 0;
							width: 0.3rem;
							height: 1rem;
							background-color: #1890FF;
						}
					}
					.remenshipin1::after{
						content: "";
						display: block;
						clear: both;
					}
					.remenshipin2{
						float: left;
						margin-left:0.45rem ;
						position: relative;
						
						ul{
							list-style: none;
							
							li{
								float: left;
								font-size: 0.5rem;
								color: #000;
								font-weight: 500;
								padding: 0.8rem 0 1.6rem 0;
								margin: 0 0.9rem;
								cursor: pointer;
								
								img{
									vertical-align: middle;
									width: 0.8rem;
									height: 0.8rem;
								}
								
								span{
									display: inline-block;
									margin-left:0.2rem ;
								}
							}
							li:nth-of-type(1){
								animation-delay: 0.45s;
							}
							li:nth-of-type(2){
								animation-delay: 0.55s;
							}
							li:nth-of-type(3){
								animation-delay: 0.65s;
							}
							li:nth-of-type(4){
								animation-delay: 0.75s;
							}
							li:nth-of-type(5){
								animation-delay: 0.85s;
							}
							
						}
						.tianjia{
							position: absolute;
							display: block;
							height: 1px;
							width: 2.4rem;
							background-color:#1890FF ;
							bottom: 0.4rem;
							left: 4%;
							transition: all 0.6s ease;
						}
						.tianjia:before{
							position: absolute;
							left: 0.8rem;
							top: -0.3rem;
							content: "";
							display: block;
							width: 0;
							height: 0;
							border-left: 0.4rem solid transparent;
							border-right: 0.4rem solid transparent;
							border-bottom: 0.3rem solid #1890FF;
						}
					}
				}
				.remenshipinzong::after{
					content: "";
					display: block;
					clear: both;
				}
				
			}
			.remenshipin::after{
				content: "";
				display: block;
				clear: both;
			}
			
		}
	}

</style>
